<template>
	<Container>
		<view class="header">
			<view class="article" v-if="!isStart && articleIsShow">
				<image
					class="img"
					:style="{ filter: colors[assignment.optionArticles[current].colorText] }"
					:src="
						'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' +
							(encodeURI(assignment.optionArticles[current].shapeText) ? encodeURI(assignment.optionArticles[current].shapeText) : '方形') +
							'.png'
					"
					mode="aspectFit"
				></image>
			</view>
			<view class="article" v-if="isStart && questionPress"><image class="img" src="../../../static/wenhao.png" mode="aspectFit"></image></view>
			<view class="article" v-if="isStart && !questionPress">
				<view
					v-for="(item, index) in assignment.optionArticles"
					:class="{ error: chooses[index] === 'error' }"
					:key="index"
					@tap="tap(item, index)"
					hover-class="touch"
					hover-stay-time="300"
				>
					<image
						class="image img"
						:style="{ filter: colors[item.colorText] }"
						:src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/question/shape/' + encodeURI(item.shapeText) + '.png'"
						mode="aspectFit"
					></image>
					<SuccessIcon :bottom="30" :right="30" v-if="chooses[index] === 'success'" />
				</view>
			</view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<Question :question="isStart ? assignment.questionName : ''" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import SuccessIcon from '../successIcon.vue'
export default {
	data() {
		return {
			colors: this.config.shapeColor,
			current: 0,
			isStart: false,
			timer: null,
			articleIsShow: true
		}
	},
	components: { AudioIcon, Question, Container, SuccessIcon },
	mixins: [mixins],
	beforeDestroy() {
		clearTimeout(this.timer)
	},
	methods: {
		tap: function(item, index) {
			if (this.isComplete) return
			this.isComplete = true
			if (item.isMatched) {
				this.optionStatus('success', index)
				this.$parent.next({
					isSure: true
				})
			} else {
				this.optionStatus('error', index)
				this.$parent.next()
			}
		},
		questionPlay: async function() {
			clearTimeout(this.timer)
			const src = this.isStart ? this.assignment.answerTexts[0] : this.assignment.optionArticles[this.current].audioUrl
			this.dialogueAudio({
				src: src,
				start: () => {
					this.questionPress = true
				},
				end: () => {
					this.questionPress = false
					if (this.isStart) return
					this.timer = setTimeout(async () => {
						if (this.current === this.assignment.optionArticles.length - 1) {
							this.articleIsShow = false
							this.isStart = true
							const question = await this.parseTextAudio({
								text: this.assignment.questionName,
								speaker: this.assignment.audioSpeaker ? this.assignment.audioSpeaker : null
							})
							this.dialogueAudio({
								src: question,
								start: () => {
									this.questionPress = true
								},
								end: () => {
									setTimeout(() => {
										this.questionPlay()
									}, 1000)
								}
							})
							return
						}
						this.current++
						this.articleIsShow = false
						setTimeout(() => {
							this.articleIsShow = true
						}, 0)
						this.questionPlay()
					}, 2500)
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	height 65vh
	width 720rpx
	border-radius 70rpx
	background white
	border 12rpx solid #FCC77D
	box-sizing border-box
	margin 1.5vh 0 5vh 0
	display flex
	position relative
	.article
		width 100%
		height 100%
		display flex
		align-items center
		justify-content center
		flex-wrap wrap
		animation outIn 0.4s
		image
			width 75%
			height 75%
		view
			width 50%
			height 50%
			display flex
			align-items center
			justify-content center
			transition all 0.3s
			position relative
			.image
				width 85%
				height 85%
</style>
